@use '../tp';

.#{tp.$prefix}-grlv {
	position: relative;

	&_g {
		@extend %tp-monitor;

		display: block;
		height: calc(#{tp.cssVar('container-unit-size')} * 3);

		polyline {
			fill: none;
			stroke: tp.cssVar('monitor-fg');
			stroke-linejoin: round;
		}
	}
	&_t {
		margin-top: -4px;
		transition: left 0.05s, top 0.05s;
		visibility: hidden;

		&#{&}-a {
			visibility: visible;
		}
		&#{&}-in {
			transition: none;
		}
	}
	&.#{tp.$disabled} &_g {
		opacity: 0.5;
	}

	.#{tp.$prefix}-ttv {
		background-color: tp.cssVar('monitor-fg');

		&::before {
			border-top-color: tp.cssVar('monitor-fg');
		}
	}
}
